<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			<a href="" class="logo"></a>
			<div class="box">
				<a href="" class="a1"></a>
				<a href="" class="a2"></a>
				<a href="" class="a3"></a>
			</div>
		</div>
		<!-- 内容 -->
		<div class="center">
			<div class="img">
				
			</div>
			<div id="login">
				<div class="log">
					<div>还没有聚美帐号？<a href="">30秒注册</a></div>
					<h1>登录聚美</h1>
				</div>
				<div class="radio">
					<span><input type="radio" class="input1" name="a" id="" value="" checked="checked"/>普通登录</span>
					<span>
						<input type="radio" class="input2" name="a" id="" value="" />手机动态密码登录
					</span>
				</div>
				<form class="phone" onsubmit="false">
					<input class="input1 oinput" id="userPhone" type="text"placeholder="已验证手机/邮箱/用户名" name="userName"/>
					<div class="focus_text1">
						请输入登录名,登录名可能是您的手机号,邮箱或用户名
					</div>
					<input class="input2 oinput" id="uesrPwd"  type="text" placeholder="密码" name="userPwd"/><!-- <a href="" class="huoqu">获取手机动态密码</a> -->
					<div class="focus_text2">请输入您的密码,您的密码可能为字母,数字或符号的组合</div>
					<div class="content" id="content">
						<p class="p1" id="p1">请按住滑块，拖动到最右边</p>
						<p class="p2" id="p2"></p>
						<span id="move">>></span>
					</div>
					<input class="zidong" type="checkbox" name="" id="" value="" checked="checked"/> &nbsp;自动登录
					<input type="button" name="" id="denglu" value="登录" class="button"/>
					<div class="icon">
						<div>你也可以使用以下帐号登录</div>
						<p class="p1">
							<a href="" class="a1"></a>
							<a href="" class="a2"></a>
							<a href="" class="a3"></a>
							<a href="" class="a4"></a>
							<a href="" class="a5"></a>
							<span>更多<i id="more"></i></span>
							
						</p>
						<p class="p2" id="more-p2">
							<a href="" class="a6"></a>
							<a href="" class="a7"></a>
							<a href="" class="a8"></a>
						</p>
					</div>
				</form>
				<div class="bottom">
					
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="footer">
			<p class="text">
            Copyright © 2010-2015 北京创锐文化传媒有限公司 Jumei.com 保留一切权利。客服热线：400-123-8888 <br>
            京公网安备 11010102001226 号 | 京ICP证111033号 | 食品流通许可证 SP1101051110165515（1-1）| 营业执照 | 公示制度</p>
			<p class="img">
				<a href="" class="a1"></a>
				<a href="" class="a2"></a>
				<a href="" class="a3"></a>
				<a href="" class="a4"></a>
				<a href="" class="a5"></a>
			</p>
		</div>
	</body>
</html>
<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
<script src="jQuery.js"></script>

<script type="text/javascript">
	let oSpan = document.querySelector("#move");
	let oP2 = document.querySelector("#p2");
	let oP1 = document.querySelector("#p1");
	let oContent = document.querySelector("#content")
	oSpan.onmousedown = function(evt){
		let e = evt || event;
		let offsetX = e.offsetX;
		oContent.onmousemove=function(evt){
			oSpan.style.pointerEvents = "none";
			let e = evt || event;
		let x =e.offsetX - offsetX;
		if(x<0){
			x = 0;
		}
		let maxleft = oContent.offsetWidth - oSpan.offsetWidth;
		if(x > maxleft){
			x = maxleft;
		}
		oSpan.style.left = x + "px";
		oP2.style.width = x +"px";
		if(x==maxleft){
			oP1.innerText = "验证通过";
			oP1.style.color = "white";
			oSpan.innerText = "√";
			oSpan.style.backgroundColor = "white";
			oSpan.style.pointerEvents = "auto";
			oContent.onmousemove = null;
		}
		
		}
		oContent.onmouseup = function(){
			oSpan.style.pointerEvents = "auto";
			oContent.onmousemove = null;
			let maxleft = oContent.offsetWidth - oSpan.offsetWidth;
			let x =e.offsetX - offsetX;
			if(x!==maxleft){
				oSpan.style.left = 0+"px";
				oP2.style.width = 0 +"px";
			}
			
		}
		
	}
	$(function(){
		$("#more").click(function(){
			$("#more-p2").stop().slideToggle();
		});
	});
	let oInput = document.querySelectorAll(".oinput");
	let oText1 = document.querySelector(".focus_text1");
	let oText2 = document.querySelector(".focus_text2");
	oInput[0].onfocus = function(){
		oInput[0].style.boxShadow = "0 0 4px 1px rgba(32,157,230,.4)";
		oInput[0].style.marginBottom = 0;
		oText1.style.display = "block";
	}
	oInput[1].onfocus = function(){
		oInput[1].style.boxShadow = "0 0 4px 1px rgba(32,157,230,.4)";
		oText2.style.display = "block";
		oInput[1].style.marginBottom = 0;
	}
	oInput[0].onblur = function(){
		oInput[0].style.boxShadow = "none";
		oText1.style.display = "none";
		oInput[0].style.marginBottom = "40px";
	}
	oInput[1].onblur = function(){
		oInput[1].style.boxShadow = "none";
		oText2.style.display = "none";
		oInput[1].style.marginBottom = "40px";
	}
	// $(function(){
	// 	$("#denglu").click(function(){
	// 		console.log(123);
	// 		let UserPhone = $("#userPhone").val();
	// 		let UserPwd = $("#uesrPwd").val();
	// 		$.ajax({
	// 			url: "login.php",
	// 			type: "post",
	// 			data: "userPhone=123456&userPwd=123456",
	// 			success:function(resText){
	// 				if(resText ==0){
	// 				$(window).attr('location', 'index.html');
	// 				console.log("你好");
	// 				}else if(resText ==1){
	// 				console.log("电话输入错误");
	// 				}else if(resText==2){
	// 				console.log("密码输入错误");
	// 				}
	// 			}
	// 		})
	// 	})
		
	// })
	// let oUserPhone = document.querySelector("#userPhone");
	// let oUserPwd = document.querySelector("#uesrPwd");
	// let oDengLu = document.querySelector("#denglu");
	// oDengLu.onclick = function() {
	// 	let xhr = new XMLHttpRequest();
	// 	xhr.open("POST", "..\login.php", true);
	// 	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	// 	xhr.onreadystatechange = function() {
	// 		if (xhr.status == 200 && xhr.readyState == 4) {
	// 			fun(xhr.responseText);
	// 		}
	// 	}
	// 	xhr.send("userName=" + oUserPhone.value);
	// }
	
	// function fun(resText) {
	// 	if (resText == 0) {
	// 		// $(window).attr('location', '../index.html');
	// 		document.write("你好");
	// 	} else if (resText == 1) {
	// 		document("电话输入错误");
	// 	} else if (resText == 2) {
	// 		document("密码输入错误");
	// 	}
	// }
	
</script>
